<template>
  <view class="zph">
    <scroll-view
      class="zph-list"
      scroll-x
      enable-flex
      @scrolltolower="loadMore"
    >
      <RecruitmentFairCard
        class="list-item"
        v-for="item in zphList"
        :key="item.id"
        :item="item"
      ></RecruitmentFairCard>
      <Empty
        v-if="loaded && !zphList.length"
        :baseImg="emptyImg"
        text="招聘会正在筹备，敬请期待…"
        :fontWeight="400"
        class="empty"
      />
    </scroll-view>
  </view>
</template>

<script>
import RecruitmentFairCard from "./RecruitmentFairCard.vue";
import Empty from "@/components/Empty.vue";

import { getZphList } from "@/api/modules/zph.js";

export default {
  components: {
    RecruitmentFairCard,
    Empty,
  },
  data() {
    return {
      zphList: [],
      pageParams: {
        pageNo: 1,
        pageSize: 20,
      },
      emptyImg: this.$imgBaseSelf + "common/empty.png",
      finished: false,
      loading: false,
      timeType: "now",
      moreLoading: "loadmore",
      loadText: {
        loadmore: "加载更多",
        loading: "加载中",
        nomore: "已经到底啦",
      },
      loaded: false,
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData(isMore) {
      if (this.moreLoading == "loading" || this.moreLoading == "nomore") return;

      const params = {
        pageNo: this.pageParams.pageNo,
        pageSize: this.pageParams.pageSize,
        timeType: "now",
      };
      this.moreLoading = "loading";
      getZphList(params)
        .then((res) => {
          this.moreLoading = "loadmore";
          this.loaded = true;
          if (res && res.code == 200) {
            let data = res.data.map((item) => {
              item.startTime = item.startTime.replace(/\-/g, ".");
              item.endTime = item.endTime.replace(/\-/g, ".");
              return item;
            });
            if (isMore) {
              this.zphList.push(...data);
            } else {
              this.zphList = data;
            }
            this.pageParams.pageNo++;
            if (this.pageParams.pageNo > res.pageparam.pages) {
              this.moreLoading = "nomore";
            }
          } else {
            this.moreLoading = "nomore";
            uni.showToast({
              title: res.status_desc,
              icon: "none",
            });
          }
        })
        .catch((err) => {
          this.moreLoading = "nomore";
        });
    },
    loadMore() {
      this.getData(true);
    },
  },
};
</script>

<style lang="scss" scoped>
.zph {
  height: 544rpx;
  .icon {
    width: 32rpx;
    height: 32rpx;
    margin-right: 12rpx;
    margin-top: -6rpx;
  }
  .icon-hot {
    background-image: url($img-base + "career/hot.png");
  }

  &-list {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 32rpx 32rpx 0 32rpx;
  }
  .list-item {
    margin-right: 24rpx;
  }
  .list-more {
    margin: 0 auto;
    width: 100%;
  }

  .empty {
    margin: 0 auto;
  }
}
</style>
